import React, { Component } from 'react';

import {
    MailOutlined,
    ShoppingCartOutlined,
    UserOutlined,
    UnorderedListOutlined
} from '@ant-design/icons'

import './top_bar.css'
import { Menu, Switch, Divider } from 'antd';

import { menu, Dropdown, Button } from 'antd';
import Login from '../login/login';
import Top_cart from '../shopping_cart/top_cart/top_cart'

const { SubMenu } = Menu;

export default class Top_bar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            mode: 'inline',
            theme: 'light',
            display: 'none'
        }
    }
    handleClick() {
        this.setState({ show: !this.state.show })
    }
    goLoginM = () => {
        this.props.history.push('/login')
    }
    goCartM = () => {
        this.props.history.push('/shopping_cart');
    }
    goHomeM = () => {
        this.props.history.push('/homepage')
    }
    goAccountM = () => {
        this.props.history.push('/account')
    }

    render() {
        const {display} = this.state
        let token = localStorage.getItem('token')

        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                        中文
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                        English
                     </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                        選ぶ
                    </a>
                </Menu.Item>
            </Menu>
        );
        return (
            <div>
                <div className="top_bar clearfix">
                    <ul className="social_icons">
                        <li>
                            <a href="mailto:service@ourlifemarket.com" title="发送电子邮件" target="_blank" className="icon-email">
                                <div style={{ lineHeight: '40px' }}><MailOutlined style={{ fontSize: '15px' }} /></div>
                            </a>
                        </li>
                    </ul>
                    <span className="social_icons-item"
                        onClick={this.handleClick.bind(this)}
                    >
                        <span style={{ lineHeight: '40px' }}><UnorderedListOutlined style={{ fontSize: '18px' }} /></span>
                        <span className="icons-item">菜单</span>
                    </span>
                    <div className="cart_container"
                        onMouseOver={() => this.setState({ display: "block" })}
                    >
                        <div
                            onClick={this.goCartM.bind(this)}
                            className="icon-cart mini_cart dropdown_link" title="我的购物车">
                            <span className="cart_count">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font
                                        style={{
                                            verticalAlign: 'inherit',
                                            float: 'right',
                                            lineHeight: '40px',
                                            paddingLeft: '5px'
                                        }}
                                    >0</font>
                                </font>
                                <div style={{ lineHeight: '40px', float: 'right' }}>
                                    <ShoppingCartOutlined style={{ fontSize: '15px' }} />
                                </div>
                            </span>
                        </div>
                    </div>

                    <div className='cartIcon' 
                    onMouseOver={() => this.setState({ display: "block" })}
                    onMouseOut={() => this.setState({ display: "none" })}
                    style={{ display: display }}
                    >
                        <Top_cart className="cart_content" />
                    </div>

                    <ul className="menu right">
                        <li>
                            <div className="currencies">
                                <Dropdown overlay={menu} placement="bottomLeft" arrow>
                                    <Button>选择语言</Button>
                                </Dropdown>
                            </div>
                            <div className="icon-user" title="我的帐户">
                                <span>
                                    <UserOutlined style={{ fontSize: '15px' }} />
                                    {
                                        token == null ? (
                                            <font style={{ verticalAlign: 'inherit' }}
                                                onClick={this.goLoginM.bind(this)}
                                            >
                                                <font style={{ verticalAlign: 'inherit' }}>登录</font>
                                            </font>
                                        ) : (
                                                <font style={{ verticalAlign: 'inherit' }}
                                                    onClick={this.goAccountM.bind(this)}
                                                >
                                                    <font style={{ verticalAlign: 'inherit' }}>我的账户</font>
                                                </font>
                                            )
                                    }
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div className="top-menu">
                    <Menu
                        defaultSelectedKeys={['1']}
                        mode={this.state.mode}
                        theme={this.state.theme}
                        style={{ display: this.state.show ? 'block' : 'none' }}
                    >
                        <Menu.Item key="1"
                            onClick={this.goHomeM.bind(this)}
                        >家
                        </Menu.Item>
                        <SubMenu key="sub1" title="面巾">
                            <Menu.Item key="2">动漫Face Bandana</Menu.Item>
                            <Menu.Item key="3">儿童面巾</Menu.Item>
                            <Menu.Item key="4">骷髅面巾</Menu.Item>
                            <Menu.Item key="5">STARRY SKY面对头巾</Menu.Item>
                            <Menu.Item key="6">FLAG Face头巾</Menu.Item>
                            <Menu.Item key="7">NFL Face头巾</Menu.Item>
                            <Menu.Item key="8">动物脸头巾</Menu.Item>
                            <Menu.Item key="9">HERO Face头巾</Menu.Item>
                            <Menu.Item key="10">人脸头巾</Menu.Item>
                            <Menu.Item key="11">花脸头巾</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" title="口罩">
                            <Menu.Item key="12">NFL面膜</Menu.Item>
                            <Menu.Item key="13">NBA面具</Menu.Item>
                            <Menu.Item key="14">FIFA面膜</Menu.Item>
                            <Menu.Item key="15">英雄面具</Menu.Item>
                            <Menu.Item key="16">国旗与摩托面膜</Menu.Item>
                            <Menu.Item key="17">星空面具</Menu.Item>
                            <Menu.Item key="18">万圣节面具</Menu.Item>
                            <Menu.Item key="19">儿童面具</Menu.Item>
                            <Menu.Item key="20">莱茵石面膜</Menu.Item>
                            <Menu.Item key="21">哈利·波特面膜</Menu.Item>
                            <SubMenu key="sub1-2" title="动漫面具">
                                <Menu.Item key="22">火影忍者面具</Menu.Item>
                                <Menu.Item key="23">一件面膜</Menu.Item>
                                <Menu.Item key="24">龙珠面具</Menu.Item>
                                <Menu.Item key="25">宫崎骏系列面膜</Menu.Item>
                                <Menu.Item key="26">水手月亮面膜</Menu.Item>
                            </SubMenu>
                        </SubMenu>
                        <Menu.Item key="27">
                            卫衣和卫衣
                    </Menu.Item>
                        <Menu.Item key="28">
                            袖套
                    </Menu.Item>
                    </Menu>
                </div>
            </div>
        );
    };
}